<template>
  <view class="container">
    <view class="title">作业题目</view>
    <!-- 问题 -->
    <view class="question">
      {{ title.content }}
    </view>
    <image :src="imgUrl + title.pic" mode="aspectFill" class="img"></image>
    <!-- 输入的答案 -->
    <textarea class="content" v-model="content" placeholder="请输入答案" maxlength="-1"></textarea>
    <!-- 图片上传答案 -->
    <view class="imgbox">
      <image
        :src="imgUrl + item"
        mode="aspectFill"
        v-for="(item, index) in imagelist"
        :key="index"
        style="width: 220rpx; height: 220rpx; margin-top: 10rpx"
        v-if="imagelist.length != 0"
      ></image>
      <image @click="upimage" src="../../static/icon/upload.png" mode="aspectFill" style="width: 220rpx; height: 220rpx"></image>
    </view>
    <!-- 提示 -->
    <view class="tip">可以通过输入框回答问题，也可拍照上传</view>
    <view class="submit" @click="submit">提交</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 0,
      imagelist: [],
      content: '',
      currentid: '',
      title: {},
      imgUrl: ''
    };
  },
  methods: {
    async submit() {
      const res = await uni.$http.post('/homework/answer', {
        user_content: this.content,
        user_pic: this.imagelist.join(','),
        homework_id: this.currentid
      });
      if (res.data.code == 1) {
        uni.redirectTo({
          url: '/parents/homeworklist/homeworklist'
        });
      }
    },
    upimage() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (res) => {
          console.log(res.tempFiles[0].tempFilePath);
          uni.uploadFile({
            url: this.upimg + '/api/common/upload', //仅为示例，非真实的接口地址
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: uni.getStorageSync('token')
            },
            success: (res2) => {
              console.log(JSON.parse(res2.data));
              this.imagelist.push(JSON.parse(res2.data).data.url);
            }
          });
        }
      });
    }
  },
  onLoad(e) {
    this.imgUrl = this.imgurl;
    if (e.data) {
      console.log(JSON.parse(e.data));
      this.title = JSON.parse(e.data);
      this.currentid = JSON.parse(e.data).id;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 30rpx;
  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
  .img {
    width: 690rpx;
    height: 280rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .question {
    box-sizing: border-box;
    width: 690rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }
  .content {
    box-sizing: border-box;
    width: 690rpx;
    height: 330rpx;
    padding: 30rpx;
    margin-top: 15rpx;
    background: #f8f8f8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
  }
  .imgbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20rpx;
  }
  .tip {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }
  .submit {
    box-sizing: border-box;
    position: fixed;
    width: 670rpx;
    height: 90rpx;
    text-align: center;
    line-height: 90rpx;
    background: #3553e8;
    color: #fff;
    bottom: 40rpx;
    left: 40rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
}
</style>